<template>
    <template v-if="visible">
        <Teleport to="body">
            <div class="zgn-textInput-overLay" @click="close" ></div> 
            <div class="zgn-textInput-wrapper">
                <main class="zgn-texInput">
                    <input class="zgn-textInput-input" 
                        type="text" :placeholder="placeholder"
                        :value="inputContent"
                        @input="setContent"/>
                    <div class="zgn-textInput-nav">
                        <div></div>
                        <div>
                            <Button theme="button" @click="cancel">取消</Button>
                            <Button theme="button" purpose="yes" @click="ok">确认</Button>
                        </div>  
                    </div>
                </main>
            </div>
        </Teleport >
    </template>
</template>

<script>
import Button from './Button.vue'
import {ref} from 'vue'
export default {
    components:{Button},
    props:{
        placeholder:{
            type:String,
            default:'请在此输入内容'
        },
        visible:{
            type:Boolean,
            default:true,
        },
        inputContent:{
            type:String,
            default:''
        },
        ok:{
            type:Function
        },
        cancel:{
            type:Function
        }
    },
    setup(props,ctx){
        const setContent=(e)=>{
            ctx.emit('update:inputContent',e.target.value)
        }
        const ok=()=>{
            if(props.ok && props.ok()!== false){
                close()
            }
        }
        const cancel=()=>{
            props.cancel()
            console.log('我执行了 ')
            close()
        }
        const close=()=>{
            ctx.emit('update:visible',false)
        }
        return{ ok,close,setContent,cancel}
    }        
}
</script>

<style lang="scss">

.zgn-textInput-overLay{
    position: fixed;
    background: rgba(122, 119, 119, 0.5);
    z-index: 20;
    width: 100vw;
    height: 100vh;
    top: 0;
    right: 0; 
 
}
.zgn-textInput-wrapper{
    position: absolute;
    z-index: 30;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px rgb(201, 199, 199);
    background-color: white;
    width: 450px;
    height: 110px;
    top: 20%;
    left:40%;
    padding: 10px;
    > .zgn-texInput{
        >.zgn-textInput-input{
            border:none;
            height: 40px;
            padding: 10px;
            font-size:16px;
            outline: none;
            
        }
        >.zgn-textInput-nav{
            display: flex;
            justify-content: space-between;
            margin:15px;
        }
    }
}

@media (max-width:500px) {
    .zgn-textInput-wrapper{
        left:10%;
        width:300px;
    }       
}
</style>